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...
Related
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
I have a funny issue that I have spent hours on. It looks like it has something to do with IOS Webkit since it only happens on IOS (Firefox, Chrome), but never on Android or Windows (also Firefox, Chrome). Because it only happens on a mobile phone it is difficult to debug.
I have a very specific div that does not render, but only sometimes. I have not been able to pin point when it renders and when not ... but I can change dom elements outside of it and then sometimes it works. This is a single page application and the dom gets manipulated via javascipt.
The divs above it works fine
I have attached an image of the div in question from my windows chrome machine.
The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!
I'm developing a website and whenever I load a pretty long page on chrome, it creates some sort of a box that covers up the bottom portion of my page. The long pages look fine on Safari and Firefox; it's only Chrome that is causing this problem.
Here's what the behavior looks like:
And here's the page with the issue: https://nosh-staging.herokuapp.com/events
If you keep scrolling to the bottom, you'll notice the giant white box that covers the last 15% - 20% of the page.
Few quirks I've noticed:
I'm using a 15" MBP (1440 x 900 resolution screen) and a 27" Thunderbolt display (2560 x 1440). When I open up Chrome in the Thunderbolt display, the page loads just fine. As soon as I move the window to my 15" screen, it just covers up the whole bottom part of the page.
When I inspect the elements, all the codes seem to load just fine. It almost feels like Chrome is putting up a huge box on top of the page. When I try to click + drag to select text, I can't see the selection because of the box.
I'm currently developing on Rails 3.2.13 and Ruby 2.0.0. Tested the pages on Chrome ver. 30.0.1599.101, Firefox ver. 25.0, and Safari 7.0. I've tried disabling all the extensions and loading the page, but that did not help either.
I was experiencing the same issue - long pages cut off half way only in Chrome. Other answers here didn't work, but changing my css animations slightly on the element that was cut off did. I removed the forwards below, and the issue stopped. Bizarre.
Changed from:
animation: 0.2s fadeIn forwards 1 ease;
To:
animation: 0.2s fadeIn 1 ease;
I had a very similar problem with the bottom of the page being cut off in Chrome. The page also flickered while scrolling.
It rendered fine in all the other browsers.
The solution, in my case, was to remove {mix-blend-mode: multiply;} from an element on the page. This resulted in all of the weird render bugs going away.
I hope this is of use to someone else as it took over a day of head-scratching to figure this out.
Had a very similar issue on two separate projects, and this only happens in Chrome on desktop (both Mac and Windows) and Chrome for Android.
Here's what i found:
It appears CSS animations have a limited visible 'render area'.
When you apply an animation to a element using 'forwards' it remains in this state and 'render'.
This also leads to animation lag when you are animating in multiple elements within the container element that is stuck 'forwards'.
Solutions i found to work:
Reduce the animation 'area' i.e: animate elements with a smaller pixel area, not large containers.
When wanting to animate large container elements i.e: fading in all content - do not apply the animation to the container. Create an element that fully overlays your content, and animate (fade out) that instead.
#TimothyBuktu solution above helped point me in the right direction.
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