Hi I am developing a corporate website and while it works well for almost all browsers, I can't seem to get it properly working on safari.
The cards on the top pages are supposed to be rotating but on safari it seems the transformation is being applied to the whole HTML page.
Actual top page here
Related
I am coding a react application that displays an animation for a moving color within a div when a user clicks. I do this using a div inside that changes its inset-inline-start and that has a transition: all 0.3s ease. I am using MUI, so it auto-fills -webkit-transition. For some reason, the animation doesn't show up on chrome for android.It works perfectly fine in my computer's devtools and when tested on an iPhone, and on my android device with firefox, but not on my android device with chrome...
I tried replacing inset-inline-start with left, removing other properties like pointer-events: none, and more - to no effect... I tried updating my version of chrome, tested on other androids - and it doesn't work on any android device.
Here is what shows up in my devtools:
(I am using stylis-rtl-plugin, which is why the .muirtl-...)
The inset-inline-start property changes correctly and the box moves, and in the other scenarios it animates nicely and moves from place to place, but not on chrome with androids...
Would really appreciate help - can't wrap my head around why this is happening...
I am beginner in web page development so I don't have any knowlede about which things one should keep in mind while developing webpage as different browser have different approach of displaying the webpage. So please help me to know the proper way to develop the web page.
Right now i am facing a problem :
In the table if 'td' border is not set then the background image displayed in firefox but not in chrome and safari and if set then it display in chrome, safari and firefox.
Why?
I am working with Foundation 4 plus WP and came across a very interesting issue and this is not a UTF-8 issue.
Page rendering in Chrome:
http://www.nmjgraphics.com/imaging/chrome_ren.jpg
Page rendering in Firefox (IE 10 loads the same way):
http://www.nmjgraphics.com/imaging/ff_ren.jpg
In both FF and IE the top navigation renders perfect out of the box, but in chrome it is bumped down by 30px. Now I can apply a margin of -1.9% 0% 0% 24.5% and that gets the menu back to where is "should" be on the browser, but IE and FF shift the menu by -1.9% and that cuts the navigation in half. In addition to that I also tried using the top element setting at 100% initially and then using "inspect element" in chrome move the number down to 0 with no effect at all.
This has not been tested on Opera or Safari, but my assumption is they will render just like FF and IE.
I do apologize for the links instead of images, but I need 10 rep just to add images to the question and I can only post two links, but I did have a total of 3 images showing the rendering on the three browsers. If you want to see the ie rendering, just change the browser name to ie_ren.jpg.
solved it. I was pulling my hair out for nothing. Page renders fine if I am not logged in. I completely forgot about the bar. I figured that if I wasn't placing it in the theme it wouldn't show up at all. Learned something new there. I will either add the bar (which I should) or disable it all together.
On a slider I have on my site, for some reason iPhone users are reporting that the text in the main slider (royal slider) isn't displaying. I've tested it in multiple online simulators (but they've probably just been restricting the size, rather than using the iPhones rendering engine) and have yet to replicate the issue.
It works fine for me on Android devices, but can't figure out what would stop it from showing on an iPhone.
Any ideas why?
Here's the url Issue is in the main slider in "Breaking" news section
Thanks!
It seems the royalslider.css file is telling the <a> containing the text to hide in Safari (desktop and mobile) browsers. Check Safari on the desktop and you'll see the following CSS on line 29 of royalslider.css.
-webkit-backface-visibility: hidden;
You'll probably want to override the value in your CSS file.
Here's some info on backface-visibility
Would someome do a quick check on IE 8 and go to my site and verify that what I'm seeing is correct? I've been coding a new stylesheet for IE8 and it works fine, except all of the sudden I am now getting some pixelation glitch in the top left thumbnail of my homepage slider. This wasn't there a moment ago and I haven't changed anything, so I want to make sure it's a bug on my computer and not in IE 8.
http://fdoandsons.com/beta/index.html
What I see:
Top left thumbnail on the above link flashes black squares when the slider is transitioning. You can view in a standards compliant browser and see what it's supposed to look like.