I am using contenteditable="true" to edit text in SVG. In all browsers except Safari it works.
Safari has an issue with caret position:
Sample code:
[contenteditable]{
-webkit-user-select:text;
user-select:text;
}
<div contenteditable="true" style="background: #ffe7e7">
<svg style="display:inline-block">
<text id="text" y="2em">Hello world</text>
</svg>
</div>
I have had a similar issue in the past. Unfortunately, the answer was to admit that safari sometimes has particular issues and I had to decide between supporting safari for that or rethinking the approach. Since I didn't want to drop saffari, I totally rethought the need for that layout, but YMMV. You can find the issue tracker for safari issues related to contenteditable here.
We have solved the issue by implementing our own caret. System caret is hidden by style rule.
If your Safari browser is up to date (contenteditable is fully supported from 3.1.), most likely your problem is that webkit and safari are very buggy with contenteditable. Here are Safari's bugs.
Related
I'm using scroll-margin-top on an anchor point to add space for my sticky header, but it is not supported in Safari.
These docs here - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin point out this bug -
Scroll margin is not applied for scrolls to fragment target or scrollIntoView(), see bug 189265.
Aternate Name Uses the non-standard name: scroll-snap-margin
Is there any way around this bug?
This is the only solution I've found so far that works in both Safari and Firefox... Safari-specific selectors. It's not ideal, because using padding in the Safari element limits the styling you can use, but it beats everything I've tried otherwise.
.anchor { scroll-margin-top: 130px; }
.anchor::-webkit-full-page-media, .anchor:future, .anchor:root .safari_only { padding-top: 130px;}
I had the same problem with safari, here is my solution:
[id] {
scroll-margin-top: 3ex;
outline: 0 none;
#media screen and (-webkit-min-device-pixel-ratio:0) {
margin-top: -3ex;
padding-top: 3ex;
}
}
According to caniuse.com, scroll-margin-top is now supported in safari as well.
But I get a warning in VS Code from the webhint plugin to use scroll-snap-margin-top in order to support Safari 11+. There's also a related article & a stackoverflow question, which mentions the same thing.
You would have to use scroll-snap-margin-top instead of scroll-margin-top and this is because Safari has implemented it as part of the CSS scroll snap module, which means it is only to be used with scroll snap containers.
scroll-margin-top indeed seems to work fine in Safari nowadays (tested on IOS). I landed on this topic as I had an issue with it in Safari but found that the references from Mozilla and "CanIuse" mentioned by others in this topic confirm that the later versions of Safari fully support scroll-margin-top.
In my case the issue in Safari was that I had set scroll-margin-top on an element which had "display: inline". Changing that to "display: inline-block" solved the issue. Strangely enough the issue didn't occur on desktop browsers, there it worked already with "display: inline", but for IOS (Safari and Chrome) it needed "display: inline-block".
A very nasty issue to figure out, I hope this helps someone.
.show-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="container">
<div class="row show-ellipsis">
{{record.bodyName}}
</div>
</div>
I have an application that support IE 9 to IE 11. The ellipsis style that I have applied at level is given in the below snippet. This is inside an ng-repeat. The ellipsis shows up for some of the rows and does not show for some. I also checked in database to see if the text coming from database has any html tags like br inside it, but it does not. I have also attached a screenshot for more clarity. Please help please click to see screenshot
You are working in murky waters here. After checking Caniuse.com for text-overflow it seems that text-overflow is not fully supported by IE versions under 11.
Also, the section of caniuse labeled "known issues" may help you as well:
Does not work in IE8 and IE9 on <input type="text">
Some Samsung-based browsers, have a bug with overflowing text when ellipsis is set and if text-rendering is not auto.
Does not work on select elements work in Chrome and IE, only Firefox.
Not sure whats causing the text-overflow:ellipsis not work in IE11 for some of text. I am now using ng-class to load the same style and it works. the HTMl looks like this now
record.showEllipsis = 'show-ellipsis';
<div class="container">
<div ng-class="record.showEllipsis">
{{record.bodyName}}
</div>
</div>
I've got this inline SVG on my site
JSFiddle
Problem seems to be somewhere around this line.
<line
x1="25%" y1="-567"
x2="25%" y2="200%"
style="stroke-dasharray:6 11;"
transform="skewY(45)" />
On different versions of Firefox I see some glitches with missing or flicking parts of image. In chrome/edge everything is OK. Am I using some non-standard SVG stuff, or it's just some FF bug? And is there any workarounds?
I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.
<div class='browseWrapper'>
Drag & Drop Images Here</br><em>Or click to browse.</em>
<input class='browseImage' type='file' />
</div>
Here's what i've got so far: http://jsfiddle.net/sPJ9u/
Thanks in advance.
EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.
Firefox Version: 26
Check out this related question: Why does overflow:hidden not work in a <td>?
It's because you have display set to table-cell, which makes it behave as if the div is actually a td.
You can use this structure in your css:
-moz-overflow:hidden;
I started experimenting with SVG and I'm not sure if this is something I'm doing wrong, it's not supported or it's just a Firefox bug.
This is the line in SVG
<text x="177" y="658">Web Interactive</text>
These are the styles
svg text{
position:relative;
font-size:7.3em;
font-family:'GothamBookRegular',Helvetica,Arial,sans-serif;
font-variant:normal;
font-style:normal;
text-transform:uppercase;
text-align:left;
fill:#282828;
color:#282828;
}
This works in Opera, Chrome, IE9 and Safari. I've also tested letter-spacing, and it works on all but Firefox too.
Reference page: SVG Experimenting
You can't use css, but you can always capitalize with javascript. If you want all svg text elements to be capitalized. In my case, it had tspan elements inside text elements, so this was my (jquery) code:
$('svg text tspan').each( function (){
txt = $(this).text().toUpperCase();
$(this).text(txt);
})
It doesn't work in all browsers because it is not a valid SVG property. It doesn't appear in this list:
http://www.w3.org/TR/SVG/propidx.html
There were questions about it on Bugzilla, but the conclusion was not to add it to Firefox.
https://bugzilla.mozilla.org/show_bug.cgi?id=682124
There is no text-transform property in SVG: http://www.w3.org/TR/SVG/propidx.html If it works in other browsers then it's probably because it's just because the html text and SVG text rendering shares code. Any browser might remove this feature I guess since its not in the specification, although it's more likely that it will be added to a future version of the SVG specfication than removed from existing implementations. letter-spacing is just not yet implemented in Firefox though: https://bugzilla.mozilla.org/show_bug.cgi?id=371787