I built a website, and the designer who drew the design of the page has Mac computer. He says that Mouse wheel scrolling doesn't work, only the browsers left "slider" works. I mean when you are with your mouse in center of the screen and you do the mouse wheel scroll, the page doesn't move, and if you drag Browsers scroll - it moves.
The thing is that I've been only using PC so I've got no idea - why that can happen with a website on Mac. It works fine in 5 browsers (IE, Opera, FF, Chrome and Safari on PC), and mouse scroll has problem in any browser on Mac.
Can anyone share with your ideas why could that happen and maybe how to fix it. I have 0% experience with Mac, I don't even know what to do after turn on/off button :)
P.S. i tagged PHP, CSS and HTML because the website is developed using those languages and Flash player & slider.
www.ninogvetadze.com/new
Before you go ahead and deem it a code problem, I'd have your mac user clean his scroll wheel out with either a.) an alcohol wipe or b.) a piece of paper. Rub the mouse ball with the wipe, or apply pressure to it with the paper and roll it back and forth to git any dirt out. I'm willing to bet it is a hardware issue rather than code.
If it is a newer mouse without the scroll ball, then... well, I lost the bet.
only the browsers left "slider" works
If it's on the left, it ain't the browser's standard scroll bar.
mouse scroll has problem in any browser on Mac.
Because all those browsers are using the same Flash player plugin.
the website is developed using those languages and Flash player & slider.
Yep. There you go - the Flash "slider" obviously wasn't tested on a Mac. Now you know why designers with a clue rely on standard-based approaches instead of Flash.
(Edit) Yep - just used the address in your comment above to look at your site. There's a "macmousewheelflash.js" being loaded, which apparently has something to do with adding mouse wheel support to the Flash movie at the top. Looks like that's interfering with proper wheel support for the rest of the page. You could probably just remove that - I don't see where the Flash movie needs to scroll anyway. Or, for that matter, why you need Flash for a simple cross-fade slide show...
Related
Unfortunately YouTube only counts views to videos when you click directly on the YouTube player itself. This is to prevent fraudulently high view counts. One technique if you don't want to show the YouTube player initially is to put an opaque overlay and graphic over the top with pointer-events: none. When the user clicks on your overlay they will actually be clicking on the YouTube video so the view is counted. You then capture the 'playing' event and hide the overlay exposing the player underneath.
I have a graphic on my homepage and when you click it plays a YouTube video. Before anyone cries 'clickjacking' I'm not trying to trick anyone - there's a play button in the graphic so you know it's a video.
This works completely fine for me for everything except FireFox on Mac OS. I am using the latest version - currently 34.0.5 in my tests.
Demo page : http://www.googledrive.com/host/0B3INRRYhLi7cVHNKTzhMdnRjT3M
If you run this in Chrome / FireFox Windows / Recent IE version and click on the green overlay the video will play and you will hear music.
Note: Of course in my real page I capture the isplaying event and hide the overlay.
Firefox is obviously doing some kind of clickjacking protection. If it thinks that you're trying to trick the user with an overlay over the video then it won't play it. However it is really bizarre to me that it doesn't also do this on Windows.
There are two ways to allow the video to play on Mac FireFox - both involve partially revealing the Youtube video underneath:
If you click 'Change opacity to 75%' it will show the video through underneath. If you then click it then it will play just fine.
If you click 'Make overlay smaller' it will make the overlay not completely cover the video. Clicking on it will then play just fine.
The most bizarre thing of all - when you view it in an iframe it works just fine (this is why I'm using a GoogleDrive link above that opens fullscreen) and not something like codepen/jsfiddle http://codepen.io/anon/pen/GgrZNN
I'm really looking for a workaround that doesn't involve if (firefox && mac). If this is documented somewhere in mozilla docs I haven't found it.
PS. Obviously browsers without pointer-events have to be treated differently with an on-click event. That is not shown in this example.
(I'm using Browserstack.com to test, but it does the same on a real mac.)
I get the same issue Firefox Mac (and have yet to upgrade to Yosemite), but it seems to me you have pretty much already solved your own problem. The simplest solution that I can see would be to add an extra overlay layer beneath your current one and set them both to opacity 0.98 (which seems to be the highest you can go and still have the click work — at least in my tests).
Obviously it will depend on what you hope to show on your overlay, but for my tests locally I set the under-overlay (sorry, ridiculous name) to black. This meant that the video underneath was imperceptible. You could probably even go a little lower with the opacity and still block everything out with two layers, just in case the opacity thresholds for the click blocking are different across versions of Firefox.
.x-overlay {
opacity: 0.98;
...
}
.x-under-overlay {
opacity: 0.98;
position: absolute;
background: rgba(0, 0, 0, 1);
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
NOTE: One downside to be aware of when using even slight opacity. For certain browsers (or at least versions of browsers) text that appears in a layer that has opacity can end up with buggy or missing anti-aliasing. But this mainly occurred in much older versions of Firefox and Chrome.
update
Ok this was driving me a bit round the wall, or up the bend, or which ever strange phrase that can be used to describe the experience of continually expecting one thing, but consistently getting another... which has eerie similarities to the definition of crazy.
Why on [insert home planet here] did this work for Codepen, but not in my own localhost-served iframe...??
After attempting a number of different things I spotted the sandbox attribute, which I really should have noticed before; especially considering all the strange trickery it can enable and disable with native browser processes. A quick trial and a few errorings later, and it seems what allows this to work for most of those online-code-fiddlers is the following:
<iframe src="index.html" sandbox="allow-scripts allow-same-origin"></iframe>
Still haven't found out exactly why, but if I enable the above on my localhost frame it starts working without the need for the opacity trick. I guess it must cause Firefox to route through a different process, or perhaps it just disables some kind of cross-origin clickjacking protection.
A very odd state of affairs... this is the kind of oddity I would expect from Chrome! Not good ol' Firefox.
First of all, let me explain what I mean by "smooth scrolling" here. When I rotate the mouse wheel by one "step", e.g. on Google Search results page, the page gradually moves up/down - the transition from the "before scroll" to "after scroll" states takes some time and is nicely animated. However, whenever I create a long page in html and try to scroll just one "step", there is no animation or transition on scroll - the page just instantly jumps few lines up or down. The average repaint time of my page takes about 5ms, with peaks up to 8ms, so I know repaint time is not the cause of that.
I know that such smooth scrolling can be achieved without any scripting, as for example the site http://www.thecssninja.com/ scrolls super-smooth on Chrome even with js disabled.
Why does Chrome choose not to scroll my page smoothly? How do I achieve smooth scroll without depending on JS, as CSS Ninja manages to?
PS Firefox does not seem to have that issue. How do I tell Chrome with my html/css that I'd like my page to scroll smoothly?
Either you can enable chrome smooth scrolling manually, which does not make sense for website development.
Or you can use some of the libraries to achieve that.
https://github.com/fatlinesofcode/jquery.smoothwheel
Sadly for chrome you cannot enable smooth scrolling through HTML, CSS or JS.
I know you're not after JS solutions, but I've never seen anything guarantee this outside of JavaScript, and karan's link above is certainly the smoothest example I've seen of doing this.
(Proviso: I'm using Chrome for Windows, not Linux. Apparently, that may make a difference.)
I use Chrome myself, and I always get the pages scrolling in jumps, not smoothly--even the pages you described as 'smooth' above step for me several lines at a time, including the Google results page. There used to be a flag available for this in Chrome, which allowed you to turn on smooth scrolling -- it could be accessed through Chrome's flags (go to chrome://flags/ to see those that are available) -- but it's now only available for the Linux Chrome platform. It may be available again in the future, but for now at least, it isn't. Hopefully, though, these experimental features will eventually find their way into Chrome, and render this whole issue obsolete.
Firefox, on the other hand, scrolls in nice smooth steps no matter what page I'm on--including my own local info pages which have almost no styling at all. IE scrolls smoothly, though not nearly as nicely as Firefox, while Opera behaves like Chrome, and steps through the pages several lines at a time.
I'm pretty sure that this is an issue to do with the browser, and not something that you can currently remedy with styling alone. Sorry I couldn't be of more help, but if you're doing this for a client, at least you'll be able to explain the issue.
I would highly recommend finding an alternate solution, but I have managed to find a solution to this exact problem for one of my websites. Akin to just using glitter glue to solve a leak in a wall, I discovered that including an iframe for a Google map on the page (even if it's hidden) somehow added in smooth scrolling. I have no idea how it works, but for some bizarre reason it does.
As I said though, I highly recommend not doing this, as its an extra (and sometimes lengthy) request made on each page to include an element most users won't ever see.
I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
Im making a flashbanner for a client. In this banner the viewer should be able to scroll down to see more text. This works ok in Chrome (Can I set scrollspeeds?), but it doesnt work well in firefox nor Safari.
If I scroll lightly, nothing happens, if I give the mousewheel an agressive whirl it scrolls down a liiitle bit...
I tried things like wmode window settings, and using the macmousewheel class, but to no results...
Do you guys have any idea what this could be, it's driving me CRAZY :)
Thanks in advance!!
This is a problem of ScrollPane object. And it's not the only problem of it. As far as I know, you can't avoid it continuing to use ScrollPane. I think you have to download on of custom Scrollbars/Scrollpanes, many of them are freely available.
I am currently developing a PHP website that has a lot of Flash components. On each page there are one or more custom Flash components embedded with swfObject, as well as sIFR navigation.
Every so often, ALL of the Flash objects on the page become unresponsive to the mouse (no hand pointer). So far I have found it happening only in Firefox 3.5.3 on Mac. I am using CSS to position everything with a specific stacking order to get around the bounding-box overlap issue - for example, the main navigation overlaps the top right corner of a big Flash component.
It works fine most of the time, however, if I click through the pages enough times in Firefox 3 on Mac, eventually I cannot "roll over" any of the Flash elements.
Does anyone know why all the Flash objects in a PHP page would stop responding to the mouse, sIFR included?
Here is the site if you want to give it a try.
This is usually a combination of putting wmode (transparent or opaque) on the Flash movie, which itself is contained in a floated element. Unfortunately it's a browser bug, but removing the wmode property should fix it.