The left and right buttons for the slider and the small buttons below the slider doesn't work when clicked. only works in IE but not on Firefox and chrome.
Also the images gets out of place when I re-size the browser window to a mobile phone size or tablet size browser.
this is the website http://amakris.com
Thank you
I have been driving myself crazy trying to find an answer to this very problem and I think I just have. It would appear that for the last almost 8 months that Flexslider 2.0 has had a known problem with touch devices. Personally I have an AIO touchscreen and just proved what I found. If you have a touch enabled device and visit any website using flexslider, including Woo's demo - you will notice that by using the "touch" device the slider buttons and navigation work perfectly, but not if you use the mouse.
Apparently there is a touch enabled feature in Chrome which may or may not be able to be turned off or programmed off with a little bit of code. See here: https://github.com/woothemes/FlexSlider/issues/351
It would appear that since flexslider is touch enabled, Chrome and AIO desktops or other touch devices signal to Flexslider to turn off the manual navigation because it is not needed.
I for one am happy that I can stop driving myself crazy now. Enough time has been wasted thinking about this.
I hope anyone else that finds this can rest easy to.
Related
I understand this is a highly specific question, but I will try and ask it as best I can.
We have a chat application that takes up the entire viewport when open on web browsers on mobile devices.
In most cases it works as expected.
But we had a friend who tested it on his iPhone 13 with Safari and we noticed that the URL Address bar was overlapping the text input field when the keyboard was open.
I am unsure what might be causing this, and we do not know if there is a way to mitigate this through code or if it just an odd setting in Safari particularly on iOS 13.
Is there any information on how to solve for this issue of the url bar overlapping?
Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.
This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.
The current effect being used is
filter: drop-shadow(20px 10px 4px #707070);
After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.
As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!
Been using bootstrap for awhile and its now just had a small hickup.
Getting the same issue on their example. So for cleaner code ill use theirs...
http://newsapps.github.io/bootstrap/examples/navbar-fixed-top/
Win 8.1 pro
Using chrome 41.0.2272.101m (also just updated to this.. so noticed on previous version)
Disabled all extensions, also uninstalled and reinstalled, cleared cache.
Screen res: dual screen = 1920x1080 and 1680x1050
Problem: No nav bar content. Its rendered at over 7000px wide, and content is floated right or centered.
If I resize my window to say 700x400 the navbar gets a width of 2943px.
Also of note is that now the jumbotron on that page is now not display..
Its .container gets 1170px width? Reappears though when resizing.
Debugging chrome on my own site it appears that the viewport meta tag may be a cause. Removing that it performs fine, But also removing the position:fixed solves it. Though naturally leaves it with styling issues...
Using Dev tools and selecting a device works fine. No device, no menu....
Its like the viewport and media queries are not working correctly but ONLY on my PC?
I cant reproduce it on my home PC or work colleges. I cant find any info on it and for a responsive site the view-port is needed.
Driving me nuts.... quick fix, use FF but if clients get this issue or others have it?
Cant add screenshot as < 10 rep (sorry..)
For anyone interested.
After clearing the cache, uninstalling, resetting all settings and nothing working I decided to play around again in the 'device mode' pane again, as I figured this is the most likely place it'll be due to the view port meta tag seeming to affect it.
I use this pane to test sizes and resolutions and then turn it off. BUT there must be some sort of setting in that that stuck. Un-ticking everything and changing devices doesnt work..(and resetting didnt either) but you will notice a circle icon with a cross in it in the top left. Like the 'ban' symbol and hovering over it will say 'reset all overrides'. Click it..
No idea HOW an override gone in there, or why resetting the browser, uninstalling etc would not reset them.. or where you can find them, but there you go. Problem solved.
#Logan I was having the same issue. Resetting the override doesn't work for me but switching Chrome to a new user does, bizarrely.
I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.
I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.
I already changed all my animations (keyframes) from using position top/left to transform translate3D.
And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?
You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7
Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.
I think it is hard to make this work well on mobile devices today.
I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.
Google PageSpeed Insights
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.