I have a hover set up on a site that works as intended on all but mobile devices.
I have it setup so the background on a div changes, and when the hover is removed the background reverts.
However, on mobile devices this hover property never reverts.
Is it possible to have a hover property times out?
Related
Im building my first react page and everything is all fun and exciting, but on mobile (ios in my case) There seems to be an underlying white background that appears on page reload (flashing) and when i drag the page too far. Its also visible behind the address bar.
I have checked various other Websites and usually on dark pages the addressbar is a kind of translucent black.
How do i achieve this?
I have already changed the background color in my body element etc. (hopefully not in the wrong place)
We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.
I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
Recently radio buttons on a web page that I maintain stopped working in webkit browsers Chrome and Safari.
They work just fine in Internet Explorer, Firefox for Window and Firefox for Mac.
By successively removing html from the page I have isolated the problem. It is caused by an adjacent div that has a height attribute. If I remove the height attribute on the adjacent div, the radio buttons work.
I tried to attach screen shots showing both cases. However only one screen shot seems to show when I save the edits. So it seems only one screen shot is allowed.
The visible screen shot shows after the problem is fixed by unchecking the height attribute of the "progress indicator" div.
I found a better solution than working with the height. Instead add overflow:auto to the nearby div.
I have a rather strange problem on a site I designed. Every time you hover in or out of a link, the link element and in some cases its parent flashes white quickly. This happens on every link, not just the ones with transition effect or different hover color. On FF, everything works just fine. Also the white is not the bgcolor of body.
What makes it even more mysterious is that I haven't done any changes to the site. I only updated Chrome..
I would post an image too but as I am a new user I'm not allowed to, gotta do it as a link:
http://www.planetoidi.com/temp/hover.jpg
This is caused by a large class of bugs in Chrome which show a flash (white or black, depending on the bug) when transitioning to or from accelerated rendering. This can happen on hover when there is a CSS transition from the non-hover state.
A workaround is to ensure that the base state of the element is using accelerated rendering. One way is to add the following rule for your element (without the :hover selector):
-webkit-backface-visibility: hidden;
Source: http://www.sitepoint.com/fix-chrome-animation-flash-bug/