I am using my company's slider plugin. It works great on all browsers, except for Safari on Mac. The problem that happens is that, while the image shows up, the white text on the image that's supposed to appear on the right does not show up on initial load but if you resize the window, it suddenly appears.
Here is the site:
http://redners.wpengine.com/ (only the sliders 2,3 and 5 have this text).
I tried setting backface-visibility in css and messing with the redraw function in jquery, but neither worked.
Related
Here's the issue, the pointed out black bar only in android:
When I say randomly, I mean that this black bar will appear almost exactly 50% of the time. The other half it shows the app as expected. I did 20 tests doing the exact same method of closing and opening the app, and 10 times this black bar appeared and 10 times it didn't. When it didn't show the bar, it flashed white, then went into the full screen.
I tried all the solutions here, here, here and here.
One of them says it's a jquery mobile issue, which it's not because I removed jquery mobile and it still happened. One of them said "just install this plugin and setup the settings" which didn't work. One of them says drop the view-port meta tag which didn't work. I also tried using jquery to alter the body height to be 100vh on page load and device ready which also didn't work.
It's also important to note that minimizing the app and going back into it removes the black bar. I've also tried remote inspect in chrome, but every time I open it up to find out what's there, it fixes itself. It also just randomly fixes after navigating around the app for a bit.
I'm at my wits end on this.
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.
So I've had this issue with my header. My site is adaptive and when it reaches tablet size and less the navigation turns into a drop down box. When I resize the window in Firefox it degrades nicely, but in Safari, when it reaches the switch the whole header disappears. I've been toiling with it and discovered that when I removed the slider or set the sliders display to "none" it works. When the slider is there I can't tell if the header div is behind the slider or just disappeared all together.
What in gods name is going on here?
Here's the site. http://www.benstephan.com/html
Your site works just fine in firefox, chrome and in safari too (tested with version 5.17). Probably you need to update safari then test. btw cool site.
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!