I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.
Does anyone know why this is happening and how can I solve this?
I already tried adding these css property but did not work.
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;
(Second picture) When I selected text
I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.
However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;
Again, these properties are originally for ellipsis especially for safari:
https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.
Related
I have code mirror working in a dialog but the line numbers and gutter spacing seems to be over the first 5 characters of the text.
as soon as you start typing the number jump to where they should be but the gutter part still stays and overlaps the content as you type
This only happens on dialogs, when i add the code mirror to normal page (out side of a dialog) it works 100%.
And reason why this is happening. I have added ‘refresh: true’ to the option and still does not help.
Thanks
Was searching everywhere and could not find any answer.
Ended up using this and works perfectly.
https://github.com/run-ze/vue-ace
The following CSS fix CodeMirror on Quasar Dialog
<style >
.CodeMirror-lines {
padding-left: 25px
}
</style>
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
Maybe someone out there can fill me in on whether I've encountered an odd edge case Safari bug or there was something that I missed in my CSS.
Basically, the landing page of my site (http://www.seanmichael.me/test/kodiak/) is not showing the set background (it's just showing a white background) only in Safari (6.0.5). I was surprised by this because I have used similar full-page background images with this type of css and never encountered this issue. The code is set on the body element as seen below:
body {
background: url("img/landing-bg.jpg") #2c5277 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I linted my css and had no errors, so I spent substantial time messing around with the CSS in dev tools to find a solution. Oddly enough, the edit that fixed my issue was setting a background-color property on the html element. I'm happy it works, but am still confused as to why this might happen. Please let me know if you have an explanation.
Thank You,
Sean
After having the same issue occur on another client site, I was able to figure out what the issue is. I'm still not sure if this is a bug in Safari, but the problem is as follows:
When using the _'s (underscores) WordPress starter theme and Modernizr together, the default css in the theme is putting a clearfix on the html element itself (not on purpose). For some reason setting the pseudo elements (before and after) of the html element in Safari to display table causes the html element itself to overlay everything on the page (which is set to white by default). You can check out the ticket here https://github.com/Automattic/_s/issues/212 on the github page for the _'s theme.
Edit: My concerns are for mobile websites.
Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.
Everywhere I look, people say to use:
input:focus {
outline:none;
}
or
input {
outline:none;
}
.... and that this will remove the glow.... well it doesn't.
Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements... it is just blank.
The only thing that works is using -webkit-appearance:none; - and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; - then the box shadow will not show properly.
When viewing this on a desktop browser however, the box shadows work fine even without webkit.
So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.
Here is a JSfiddle:
http://jsfiddle.net/QQGnj/4/show/
Viewing this page on iOS mobile, there is no "glow" or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn't)? This is driving me mad!
If you use outline:none; please add a focus style. See http://outlinenone.com/.
This feature is very helpful when a mouse isn't used. Outline provides an important accessibility feature, so please, if you must remove it, add back a style for your links focus and active states. Please help users understand where links exist.
Try with this:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Use -webkit-appearance: none;
#yourElement:focus {
-webkit-appearance: none;
}
#yourElement:hover {
-webkit-appearance: none;
}
And it will do the trick.
a, :visited{
outline: 0;
outline: none;
}
:hover, :active, :focus{
outline: 0;
outline: none;
}
removed the focused glow for me on Chrome/osx, iphone/mobile safari, firefox/osx
http://jsfiddle.net/toniehock/QQGnj/6/show
In my case in Magento2 it was a border and box-shadow, instead of these things above.
Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about it. For a guaranteed consistent look in all browsers, desktop and mobile, I would recommend setting outline: none anyways, though.
I have a div with the contenteditable attribute set to to true, however, it does not show a blinking cursor or update when I type text into it. I've added event listeners for focus, keydown, and keypress to see if the div is receiving them, AND IT IS!
How could it be that all the appropriate events are actually firing yet the content of the div is not appropriately updating itself? I'm not doing anything funky like preventing the default behavior of the events.
Also, I've gotten contenteditable working just fine several times before on different projects, so I'm fairly certain it's some bug being caused by the structure of this particular page's HTML. Again, the issue only occurs in Chrome and Safari; Firefox and IE8 are fine.
Okay, I figured out my problem. I had the css property '-webkit-user-select' set to none on an element way up the hierarchy of the div in question. Thus it was preventing the cursor from ever being positioned within my contentEditable div.
Interestingly, the corresponding '-moz-user-select' (which I also have set to none up the hierarchy) does not affect Firefox in the same way.
I'd like to share this code with you. It might help you out! You disable the user-select and callout for the whole site, and then override the contenteditable fields to allow user-select.
html,body{
-webkit-user-select: none;
-webkit-touch-callout: none;
}
*[contenteditable] {
-webkit-user-select: auto !important;
}