ContentFlow reflection issue with Chrome on Mac - javascript

It appears that the excellent carousel library ContentFlow has reflection issues with Chrome on Mac (I am using Lion). Seems to be fine on PC. Visit http://www.jacksasylum.eu/ContentFlow/ in Chrome and you'll see in the example the images are incorrectly mirrored with a shady part at the top as per the below screenshots. Is there a fix / workaround? It doesn't seem that there is active development on ContentFlow anymore, which is a shame.
I'm using Chrome 16.0.912.75, on Mac (Lion)
****EDIT**** Screenshots
Proper (from Safari)
Broken (from Chrome)

There's an issue open here: http://code.google.com/p/contentflow/issues/detail?id=34
People tried different things, but it breaks on Windows' Chrome :(

Related

Chrome on iOS not rendering button properly?

I have a front-end component for a project that's exhibiting the following bug:
There's a button at the bottom of the screen of one of my Panes and ONLY on chrome on iOS does the button not show. If I tap the address bar, then the button appears presumably because the pane has redrawn itself.
The other problem is that I can't recreate the bug. It only appears on a client's web app. Things that could be super helpful:
what's a good way to inspect Chrome on iOS? (I know how to inspect Safari on iOS, Chrome on Android, but not Chrome on iOS. I've also already tried the devtools mobile emulator and it does not reproduce there)
any related posts for bugs on Chrome on iOS (I've done some search already but if anyone has something deep in the internet that they remember)
any knowledge of how Chrome renders things differently than Safari for iPhones
any ideas on intermediate solutions
any ideas on potential causes

Re thread: How to load nav menu from an external file?

Re thread How to load nav menu from an external file? (No Wamp, all code must be 'browser-side')
#ThomasJames
I tried Thomas James's solution (Javascript) from the top of the page.
Works beautifully in Firefox (Mac OSX). But not work in Chrome of Safari.
Note also Thomas's SolarWind.zip download also does not load in Chrome or Safari.
I thought we should be able to have Jacascript working in all browsers?
It seems that the other solutions ONLY work in Chrome and Opera.
Any thoughts? Thanks, Steve

JavaScript Differences between Mobile iOS and Android Safari/Chrome

I have been trying to google around for a few days to find some kind of answer, but is their a difference between how iOS mobile devices understand JavaScript, vs Android?
I currently have some code that works as expected on Android (Chrome/Edge), and on Windows (Chrome, Edge, IE 8). But once we get to iOS devices, it doesn't work as expected.
I also tried to see if I could find an emulator for iOS mobile, or just downloading the mobile Safari browser, but wasn't able to find one (that didn't have a cost related to it).
I found the issue, it was related to the selectors in the code not being completed - Chrome got it, but safari didn't.

Resposive deployed website display works in chrome dev tools and Firefox but not in chrome on actual mobile devices?

I recently deployed a website after testing for responsiveness in chrome developer tools that displays correctly in chrome developer tools and on mobile in Firefox but not chrome.
Here's what it looks like in the developer tools.
Here's what it looks like on chrome on a mobile device.
You can see that the background image is gone and the header image is off to the left.
I thought it might be because of an older version of chrome so I managed to get a look at it on a newer version of chrome.
So on this newer one the picture is no longer to the left but the background is still missing.
So it works when I'm viewing the website on a desktop and reduce the size to mobile and on Firefox but breaks in chrome on mobile.
I've tried different versions of chrome, uninstalling and reinstalling chrome, using both the chrome and firefox developer tools and I've also tried finding similar questions already answered on Stack Overflow and the most similar says to make sure to have
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which I have and I even saw a post saying to add maximum-scale=1 which I tried.
Since it works fine in the developer tools I've been flying blind trying things and redeploying.
I run into the same problem, today is 2020-03-09...
It seems the #media query does not work in chrome in my iPhone SE, but safari is OK.
Also the app 'Google' is working too, you can search it from app store, it has a big 'G' with 4 colors, red/yellow/green/blue, as its symbol.
You mentioned that you're using an Android device. Try remote debugging. This lets you inspect the page as it was truly rendered on your mobile device, from a DevTools window on your desktop.
For iOS see Inspecting Safari. Unfortunately I couldn't find an official doc.

Firefox Javascript Error / Oddity / Weirdness. Any Explanations?

If you view this page...
http://eastlondondance.org/admin/MozillaProblem/example.php
...you'll find that there are no errors but that the functionality is not working.
The last dropdown is not being populated with options like the other 2. This however works on Safari, Chrome and IE.
What gives? Why isn't it working on Firefox Linux, PC or Mac but is on all other browsers?
Is it a problem with the code or a problem with Firefox?
Any help is much appreciated.
cheers,
George
Firefox is having problems with the variable name of performance. While I'm not certain why this is, renaming this to anything else will allow it to display in firefox. In the example below I renamed it from performance to performancex.
Example: http://benjaminhopkins.co.uk/stackoverflow/firefox.html
From the comments above seems not everyone see the problem? Maybe it could be a extension / plugin causing the issue. Using the developer toolbar and hovering performance firefox reveals the following:
Performance { constructor=Performance,
timing=PerformanceTiming,
navigation=PerformanceNavigation}

Categories