search

yairEO / fancyInput

Makes typing in input fields fun with CSS3 effects
1.93k stars 283 forks source link

On firefox on Mac, selection obscures the text #14

Closed davidascher closed 7 years ago

davidascher commented 11 years ago

At least with Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20130227 Firefox/22.0

any selection hides the selected text.

(other than that, really nice!)

yairEO commented 11 years ago

I will fix it if the problem consists and a solid Firefox version..the nightlies change all the time and it might just be a bug that won't be there tomorrow or who knows..

davidascher commented 11 years ago

The issue is reproducible with Firefox 19 (stable, hundreds of millions of users today).

yairEO commented 11 years ago

I developed this on Firefox 19 on my PC...what is the bug exactly? can you take a screenshot?

davidascher commented 11 years ago

huh. maybe this is a mac only issue? (or worse, a graphics driver specific issue)

I just double-clicked on the word 'type'.

screenshot 2013-03-01 at 10 43 27 AM

davidascher commented 11 years ago

Filed a bug against Gecko/Layout to see if this is an Gecko bug: https://bugzilla.mozilla.org/show_bug.cgi?id=846875

yairEO commented 11 years ago

Thanks, I've voted :+1:

I think i know why it's happening, because the text's color is transparent, and seems like the Mozilla team has a bug not showing the selected text even if it's transparent. I think it's a major bug, someone fucked up there...

jfkthame commented 11 years ago

As described in https://bugzilla.mozilla.org/show_bug.cgi?id=846875#c3, the problem is that on OS X, the selection background color is an opaque blue (by default, at least), so that the selection in the element (whose text is transparent) completely obscures the s containing the "visible" letters, behind it.

ISTM this demo is making a flawed assumption that the selection highlighting will be painted in a semi-opaque way, so that the separate text elements displayed behind it will still be visible "through" it.

yairEO commented 11 years ago

this has nothing to do with the demo, this problem is big in my opinion, a flawed UI experience. transparent text should be visible when selection is made. try to select text here: http://jsbin.com/onucil/1/edit

davidascher commented 11 years ago

FWIW, your jsbin shows consistent behavior in Chrome/Mac, Firefox/Mac, and Safari/Mac.

So I would say there seems to be agreement from browser makers that transparent text color shouldn't be affected by selection.

(I'm not sure why the original demo is showing different behaviors)

jfkthame commented 11 years ago

The OS X convention for highlighting selected text is that the text color itself is unchanged, but a selection background is painted behind it. So if the text color is specified as transparent, it remains transparent (and thus invisible) when selected. Your jsbin example exhibits this behavior across all of Firefox, Safari and Chrome on OS X.

The original demo does -not- show different behavior with regard to the display of the actual text that's being selected (in the <input> element). The difference is that the selection background color used by webkit is partially transparent, and so the letters displayed in separate <span>s behind the element, which are not actually being selected here, are still visible through the selection background.

yairEO commented 11 years ago

on my machine you select the text and the transparent color text becomes visible. my jsbin is the same as the demo page in the most basic functionally. and if it shows the same issue on all browsers than it's your OS i think...so it's the OS engineering purpose to not show transparent selected text. so I guess you must open a but to Apple then..

yairEO commented 11 years ago

another solution would just change the input's text color to anything but transparent while selected...easy enough :)