For some reason I am not aware of, one day the scrollbars in my App's DIVs disappeared.
I decided to finally look into the issue, but it's been days and had no luck.
Basically, you can scroll through these divs, however, the OS X scrollbars won't show up. If anyone could take a look and see what I am missing, I'd really appreciate it!
To replicate this:
Go to http://objectsapp.com/ with Safari or Chrome.
Use the search bar to search for: Inception
Position your pointer on the movie poster.
Scroll! (It will work, but scrollbars won't show).
Any idea why the scrollbars might be missing? (must be tested on OS X only).
Thank you!
You don't mention which version of Safari on OS X you're testing with so its difficult to determine what problem you're seeing.
In Safari 6.0 there was a WebKit bug that would cause elements with "overflow: scroll" set to not display the new overlay style of scrollbars. This issue was resolved in Safari 6.0.1. If you're using a newer version of Safari than that yet are still experiencing the issue, it's possible that you're seeing a different WebKit bug. If so, you could test the latest WebKit nightly build to see if the problem has already been addressed. It you still see it with the WebKit nightly build, I'd recommend filing a bug report.
Related
I noticed the strangest behavior on my Mac (macOS Big Sur 11.6, Apple M1) in any browser (Firefox 96.0, Chrome 97.0.4692.71).
When my cursor hovers over a link, it turns into a hand for an instant and goes back to an arrow straight away. It's like it wants to show the correct cursor, and then overwrites it.
Even having an !important to the CSS property of a link doesn't change this behavior.
Does anyone have an idea how to change this?
A video of the behavior, W3C page is used via WeTransfer:
https://wetransfer.com/downloads/37b8e4a034cbeee674fb480bf055144f20220114093334/77efdb
On an other computer (macOS Big Sur 11.2, Intel Core) I don't have this weird behavior.
I can't find anything decent online about this, my apologies if it's already mentioned somewhere.
After a few hours the behavior was gone.
An entire reboot would probably have solved it too (I only shut down the browsers and even upgraded them, but even that didn't change the behavior).
As Jaime S mentioned, this issue also mentions it CSS cursor pointer flicker once and then back to default
I have a strange issue whit my emulate touch functionality on Google Chrome version 49.0.2623.110 m.
I'm using laptop + monitor (both Dell) and running Windows 8.
The issue is that while Chrome is on my secondary monitor and touch screen emulation is enabled I cannot see a touch screen pointer (black circle) nor any kind of pointer, but when I move my Chrome to my main laptop display it would show. I tried disabling laptop display while using external monitor and it is the same, I cannot see the pointer. This was not a problem with previous Chrome version.
Did anyone had similar issues with this version?
Thank you
EDIT:
I've change the laptop, updated to win10 and updated Chrome to 50.0.2661.87 m version and I still have the same issue (colleague of mine has the same problem as well).
A colleague of mine "solved" the problem by enabling Windows' Mouse pointer trails at minimum length. I find it too annoying to work with the setting enable, but it does work if you really need it.
Mouse settings
They did some changes in recent version of Dev Tools and some options are now gone. Ensure you have "Mobile" or "Desktop with touch" selected, as you can see on the screenshot.
I ran into a problem with font rendering on Windows.
I'm used to a little difference in rendering between Mac and Windows, but this just made my mouth fall open. I tested the site thoroughly on Mac and I'm positive it looks just fine in Chrome, Firefox and Safari.
It looks like this on Mac browsers:
On Windows, it looks completely messed up in any browser (I tested Chrome, Firefox and IE):
I know Mac has Iowan Old Style installed by default, so I tried forcing the Mac browsers to use the webfont I generated using FontSquirrel, but that doesn't reproduce the problem on Mac.
Both browsers seem to load the same font (namely the woff version) correctly. Does anybody have any idea what this could be?
I can't post the link to the website because I don't have enough reputation, please look at the screenshots for the URL..
Thanks guys!
After some more research I found out the original (ttf) font worked perfectly fine on Windows, so it had to be FontSquirrel that caused the problems. I tried out 8 different types of settings on FontSquirrel and kept having the same issues.
After a while I decided to try a different generator and I came across Fontie: https://fontie.flowyapps.com/home
This actually solved the problem for me!
Generally speaking my font works fine but I'm seeing on odd occasions such as switching back to the browser from another application and sometimes when switching back from another tabs that my font seems to have unloaded and is using the fallback font.
I'm struggling to consistently replicate this and when I have seen it there are no errors.
I have also seen this happen in Chrome and Firefox on windows and osx and at a bit of a loss as to how this can be happening.
I haven't seen this issue in Firefox personally, but it is a known bug in Chrome.
https://code.google.com/p/chromium/issues/detail?id=336170
Is it possible to set a min width for an OSX window to 320px?
The default min width in Safari is greater than this which makes it difficult to program with media queries and replicate on OSX. Please see my screenshot, which will make things clearer.
Incidentally if you are going to post techy answers (I assume someone will) please bear in mind I have no experience with backend code, the most I know is CSS / PHP / JS.
I don't mind getting my hands dirty, but the instructions need to be verbose :-)
Taken from This Link - worked for me in both chrome and safari on OS X
var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');
and for landscape:
javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');
In Safari, you can install an extension called 'Resizer' and you have the option of putting in custom sizes.
The funny thing is, once you use Resizer to change the window size, it can then be resized by hand to any size you want. It is almost like using Resizer unlocks the window.
I've created a chrome extension,OSX Resizer, that makes a 320px pop-up of the current window.
Basically the same as Rubinsh's solution, but code free.
The Resizer extension that drummin mentions does not provide this behavior for me.
This can be emulated through Chrome Dev Tools now.
Open Inspector, click the gear on the bottom right, and goto the 'Overrides' tab.
You can even spoof your user agent :)
If your goal is to see how sites will look on an iPhone, you can always download Xcode for free from the Mac App Store, which includes the iOS Simulator.
Alternatively, if you have an iPhone (I assume you do if you're developing sites for it), iOS 6 includes a remote debugging feature that lets you use the Web Inspector on your Mac to inspect and edit a site loaded on your iPhone.