Size of touch caret is enlarged after zoom-in, which make it look blurry. The correct behavior is touch caret should keep still size and does not enlarge or shrink according screen zoom ratio.

I grab an svg image arbitrarily, and use it as touch caret.

Hi Carol, Currently, we use png format to display touch and selection carets, and create 1.5x, 2x, etc for higher resolution. However, it will eventually become blurry when zooming in in browser. I have done an experiment to use an svg image as touch caret, and it looks sharp at any zoom level. See the screenshot as attached. Is there particular design reason to use the png format? Or could we switch to svg format to gain better visual effect? Thanks. Note: The black drop icon in the attached screenshot is from http://iconmonstr.com/drop-7-icon/

Hi Ting-yu, I'm glad that you can support svg files now. The attachment is the SVGs for the caret. Color: #2da9e3 Caret shadow:1x 1x 2x 1x I would like to see how they work on screen, the shadow might need some adjustment. Please let me know how it works.thanks

Hi Carol, I just view the file on my mac book. The caret figures in caret_left.svg, caret_middle.svg, and caret_right.svg are all black rather than color #2da9e3. Are those SVGs correct?

Hey Ting-Yu, Yes, those SVGs are correct. Please apply #2da9e3 color to the SVG file. Thanks!

Hi Carol, Due to bug 1015575, svg image with shadow will be blurry (first image in [1]) under our current implementation of touch caret and selection carets. However svg image without shadow will be fine (third image in [1]). If the shadow of the caret is critical in visual design, we have to wait until bug 1015575 is resolved to switch to svg caret. [1] https://bugzilla.mozilla.org/attachment.cgi?id=8445168

Using svg image does not solve the problem that the caret size is changing while zooming in/out. We should investigate further.

Hi Robert, Currently, the display of touch caret is implemented as a div background image, so its size will be changed as the web content when zooming in/out. We feel it's better to retain its size as Android or iOS did. Do you have any idea how this might get implemented? Any CSS trick that might fixed the size of an div such that it ignores the zoom level? Thanks.

You're talking about pinch-zoom right? There is no easy way to make the caret size independent of pinch-zoom, unfortunately. To fix that, we'd have to put the caret in a different document parent, or extend APZC with extra metadata on the caret to indicate that it should not be enlarged by pinch-zoom.

Yes. I'm talking about pinch-zoom. On desktop browser, we have an option View->Zoom->"Zoom Text only", which does not scale image when zooming. I am not sure studying those code would help. Thanks for your prompt reply. I guess I have to look hard into the related code you mentioned anyway :)

* Replace png images with svg images for touch caret and selection carets. * Fix touch caret is enlarged on high resolution device due to background-size is not set. Try result: https://tbpl.mozilla.org/?tree=Try&rev=213b1255ffd1

Since we are going to enable touch caret and selection carets in 2.1, I would like to change those png images to svg to solve part of the blurry issue when pinch-zooming in. This also fix the incorrect touch caret size on high resolution device due to background-size is not set.

(In reply to Ting-Yu Lin [:TYLin] (UTC+8) from comment #11) > On desktop browser, we have an option View->Zoom->"Zoom Text only", which > does not scale image when zooming. I am not sure studying those code would > help. It won't.

Robert, thank you for your review. Adjust margin-left of caret_middle.svg to -15px to make it look better. Try result: https://tbpl.mozilla.org/?tree=Try&rev=e0c5b53bc65a

Please keep this bug open. We need to investigate more about making caret size independent of pinch-zooming.

Backed out by request, for causing bug 1046635: remote: https://hg.mozilla.org/integration/mozilla-inbound/rev/c3ab83f45b5d

Merge of backout: https://hg.mozilla.org/mozilla-central/rev/c3ab83f45b5d

Ting-Yu, do we use this bug to keep the caret size during zooming? If yes, I would prefer to change the bug name to 'keep the caret size during zooming'.

This bug contain many discussion related to changing the touch caret image to SVG image. Since the patch had been backout, let's change the title of this bug and resolve as WONTFIX, and open another bug to track the work in keeping the size of touch caret still.

File Bug 1068525 to track the work of keeping the size of touch caret and selection carets still.