Chrome menu rendering issue over an image - javascript

I couldn't find info anywhere, and I havee a very weird issue with Chrome's version 38 update. I have had a dropdown menu that is controlled by JS to add a styling class to a div to make it appear that the menu drops down, never had an issue till the update or in other browsers.
My Issue:
With JS enabled, after the drop down pops up, on mouse out the menu should disappear, but a portion of the menu stays, and only on top on an image its sitting on top of. If the image is a GIF, then the menu changes with the frames of the gif. If I disable JS and use CSS, everything works perfectly.
Anyone have any ideas with this issue? It seems to be a way Chrome is handling JS

Found out this it was a repainting issue with version 38 of Chrome. Doing a workaround to repaint, hopefully it gets fixed.

Related

Sidebar menu doesn't show on Safari/IOS

I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.

Materialize's Parallax causing Boostrap's Modals/Collapse disappearance on Chrome

I made a website for a local business in my area, but I found a issue on Chrome and after extensive googling I haven't found anyone else with it. The page works perfectly on Firefox and IE, but fails in Chrome.
The page:
http://elsolsaleparatodos.mx/
The issue:
Modals (Click a white circle with green drawings in the parallax to toggle) flicker above the parallax, or disappear instantly. This also happens with the mobile collapse menu. When the screen is resized making the collapse menu appear, open said menu and scroll down until a parallax comes into the viewport, the menu then disappears.
What I have come with so far:
Commenting the $('.parallax').parallax(); line on app.css fixes the issue, but breaks the parallax of course.
I have tried:
- Changing materialize.min.js to the newest materialize.js
- Checking for loading any plugin twice
- Reading the materialize's parallax function for any... anormalities.
I haven't even found a remote lead, and the issue is non-existent in any other browser so I'm out of ideas.
I was not able to find the source of the problem or why it was only present in Chrome, but I fixed it by adding the following code to my CSS:
.modal {
overflow: visible !important;
}
The modal has stopped flickering and now functions correctly.

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

Tabber widget overlapping other content on sidebar in IE

I've implemented the following tabbed widget in the sidebar of my blog (Blogger hosted): http://mylpgb.blogspot.com/2013/04/how-to-add-5-tabbed-widget-for-blogger.html
It works just fine in Chrome and Firefox (the submit box is a bit wonky in Firefox, but whatever), but in Internet Explorer, I've got some problems. When the content under a tabber tab gets a little long, it overlaps the other gadgets on my sidebar. Actually, it looks like the rest of the gadgets/content are properly pushed down, but the image directly below the tabber just gets run over. There's nothing special about that image--it's just a simple image tag.
I tried setting the table height to 100%, but no dice. I'm kind of learning as I go, so I'd be very grateful for any troubleshooting tips. Thank you.

Javascript and rendering pauses and stays paused on scroll in the android browser

I've found some wierd behaviour related to scrolling and rendering and javascript.
How to make it happen:
On any webpage that is long enough to scroll on. Start to scroll pretty fast (fling the page). then release the touch.
Now while the page is still scrolling because of the momentum. Tap the screen to stop the scroll.
This make the browser enter a wierd mode.
On the nexus one it behaves like this:
The updating of what's shown on the screen stops, you can still click on links and the go to where they are supposed to but what's shown on the screen stays the same.
If you then scroll the screen a bit the update of the screen kicks in again and what you you where suppsed to see all the time is shown.
On all phones with HTC Sense I've tried (Hero, Desire, Legend) this happens:
The updating of the screen is stopped just like on the nexus one, but also the execution of any javascript is stopped.
If you click on a link that takes you to another page however things return to normal again.
The way I tested this was I created a page like this:
http://pastebin.ca/1881620
The changeColor function simply changed the background color of 'container' to a few different colors.
So before the error what happens is that when you click any link the color changes.
after the error this happens:
Nexus one:
when you click on the links nothing happens (except the "orange link selected rounded corner box thing" is shown as if the link is clicked). Then when you scroll abit.
You can see the color has changed (and equal amount of times to the number of times I clicked the link).
On Sense:
The links take me to google.com
Has anyone else noticed this problem? Is there anyway to work around it?
Thanks.
You could try using a plugin that manipulates the browser's scrolling process, such as iScroll4.
iScroll4 let us do some pretty cool stuff (like fixed headers/footers), but it did have some performance problems in some of the older/crappier Android phones...
I can't guarantee that it'd fix your problem, and it'd be kind of a last resort, but it might be worth trying if you're interested in iScroll's other features, or if you've hit a dead end with your bug, and it's a show-stopper for your app.

Categories