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.
Related
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.
could you please help me out with the following problem?
context:
Let me start of saying I'm a amateur / hobbyist webdesigner, far from anything professional. I've been busy making a website for my business. The portfolio section contains a horizontal mousewheel scrolling section, so the images read from left to right.
I have made the website with muse, and implemented some custom CSS and JS code in there to make the horizontal scrolling happen. my knowledge of JS is limited.
problem:
Everything works fine, except in safari. Here the horizontal scrolling doesn't work. This has to do with overflow-y:hidden I have set at html and body. If I remove this, the scrolling works in safari BUT without the overflow-y: hidden, the website will not show properly in responsive mode as it will exceed the content height, showing a big blank space underneath the content where the user can swipe down to. I tried a lot of things but unfortunately I feel I'm at a dead end. Could anyone please help me out?
goal:
desktop mode: allow horizontal mousewheel scrolling in safari
responsive mode: don't show big empty space beneath content
website URL:
http://www.jellevdvegt.nl/kam.html
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.
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.
Here is the sandbox version of my site:
http://truxmapper.appspot.com/
To reproduce the error, hover over to the toolbar and go to Support --> FAQ. In Chrome/FF, this will work as expected. In IE, the background image will quickly move to the center of the page, but when its time to insert the div over the background image, its inserted on top of the page rather than the center of the page. The plugin example ( http://flowplayer.org/tools/overlay/apple.html ) works fine in IE, so i know it ought to be possible.
I've tried messing around with the div placement on the html and with the css to no avail. Does anyone know what could be the problem?
Thanks!