Words cut off at the end of lines - only in Safari - html

I am creating a short and relatively simple website for a summer project about the book Red October (located at http://dragonmath.net/summer_project_2016/summary/). The website is not complete (it is missing content, pictures, and is not yet fully responsive), but before I finish any more, I would like to fix a bug. The website appears fine in all browsers except Safari. When Safari is over 1242px wide, some of the words at the ends of the line cut off.
Originally I believed that it might be the font that was the problem, but a little bit of testing showed that the words were cut off with many fonts, all the fonts I tried. Another interesting point is that some words extend past where the cut off words are cut off. This makes me believe that it doesn't likely have to do with the width of the element, but I am not sure.
I also noticed that the website seems to be wider in Safari, The (min-width) in the #media tag was able to be smaller in Chrome, but had to be wider in Safari. I don't know if this contributes to the words being cut off only in Safari, but I thought it might help explain the problem more completely.
I found several other articles with seemingly similar problems, but none of the suggested fixes helped my problem.
This question and this article both deal with overflow, or text-overflow neither of which fixed my problem. The css in my website still has overflow: visible in it.
The website from this question is no longer at the link provided, but I would imagine that the change to the answer was adding width: 100%;. I tried that, but it didn't have any effect on the text being cut off. This MacRumors article seems to provide a similar answer to the question (changing to height: 100%; in this case). This article also mentions the fact that the text wasn't cut off in Safari (opposite of what I am finding).
I have tried Googling every possible way to put my problem that I can think of, but nothing has turned up. I have also searched Stack Overflow extensively for any reason that this could be happening. While it is hard to create a short piece of code that recreates the problem (because the problem only happens in Safari) below is all the html and css that should be causing the problem. The full code for my webpage can be found at http://dragonmath.net/summer_project_2016/summary/
.mainSection {
display: block;
height: auto;
width: 100%;
}
.sectionContentContainer {
display: inline-block;
margin-top: 40px;
margin-left: 40px;
width: 560px;
overflow: visible;
}
.sectionParagraph {
font-weight: 400px;
font-size: 20px;
width: 100%;
margin-top: 40px;
word-spacing: 10px;
}
<section class="mainSection">
<div class="sectionContentContainer">
<p class="sectionParagraph">The content goes here, but sometimes when the content stretches onto multiple lines, it cuts off random words in Safari.</p>
</div>
</section>
As far as I know, that is all the css that could impact the text. Just for background, the text has an image next to it and the image and the text are surrounded by <main> tags. The main is set to have min-height: calc(100% - 160px;
height: auto;
width: 100%;
Here are some images of what happens:
Any help would be great (and if any clarification is needed, ask in the comments).

Related

How to fix a tear between divs?

I'm working on a small practice text adventure game project. Lately I have noticed a strange tear that appears between the main story div, and the footer [menu div]. It appears randomly when you scroll the story text all the way down - sometimes it's there, sometimes it's not. The problem occurs both on mobile, and on PC.
The tear is visible here, right below "Newest line" text:
Div tear
Here an image without the tear, with the text not fully scrolled down:
No Div tear
CSS for the two divs:
main
{
font-family: '8bit', Times, serif;
font-size: x-large;
background-color: rgb(255, 255, 255);
height: 32vh;
padding: 2em;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
footer
{
font-family: '8bit', Times, serif;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgb(255, 255, 255);
height: 30vh;
padding: 1em;
}
I have tried several weird hacks, like CSS transform for both of those - it seemed to help with the tearing, but generated other weird artifacts with the box-shadow and such.
The full code is available here:
https://github.com/Akawgan/textRPG
Any ideas what might be causing that, or how to fix it?
I think you have run into the good old "fractional pixel values on a screen with discrete pixels" problem.
The main div has a height of 32vh, which equates to 509.11px on my screen, and probably to similar values on different screens.
There's a lot going on between CSS pixel values and the actual size on screen, so without complicating it I'm going to put it this way: some screen sizes can't handle this exact value. Your div is going to be rounded up or down to some integer value, often times "correctly", sometimes "incorrectly".
There's not much you can do to actually fix this issue, short of choosing another height value.
You might be able to work around it by placing the footer 1px on top of the main element:
footer {
position: relative;
margin-top: -1px;
}
This is a somewhat dirty trick that just superposes both elements in order to cover any gap caused by fractional pixels.
I found a way to 'reliably' experience the problem, by gradually changing the width of the viewport. The phenomenon changed, sometimes the background of the container showed through (I changed it to red so it was obvious), sometimes it seemed to be the greeny background that showed through, sometimes it seemed to be neither but instead a couple of gray lines (of different shades).
It is difficult to prove a negative, but if I removed the reverse of the flex column then I never managed to see the phenomenon.
This has to be speculation but it looks likely that putting your text into the order you want it rather than getting CSS to reverse it may remove the problem.

Empty Space in Safari on right side

I am at a loss and hoping you guys can help. I built my site using bootstrap 4.1, my website is http://www.visionary-creatives.com/ It seems to function as expected in chrome, firefox, and opera and IE. When I run it on Safari there is a white space on the right side, giving it a side scrolling function which is not intended.
I've gone through it line by line and checked width, and there doesn't appear to be overflowing which is causing it. I've also tried adding
html, body {
width:100%;
overflow-x:hidden;
}
This worked to fix the white space that's rendering. Unfortunately it also disabled my navbar from scrolling on those websites as well, and completely disabled mobile navigation. Sorry I don't have the entire code posted here, it's obviously long. If this question has been answered I'm sorry, I checked and couldn't find an answer regarding this.
In your bootstrap.css, find line #571:
#devDiv1, #devDiv2, #devDiv3 {
margin-top: 85px;
margin-bottom: -24px;
position: relative;
height: inherit;
perspective: 150px;
perspective-origin: 0 50%;
cursor:pointer;
}
Add overflow: hidden; there.

My Website's Scrollable Divs Work Everywhere Except Mobile Safari

I'm working on a website, http://strange.business which is designed to load 5 random stories in 5 scrollable viewing divs. Note: There are only 2 stories right now.
There didn't appear to be any problem with that aspect of the page design, the divs would scroll without issue in Chrome, IE, Edge, etc. But I tried it on my gf's iPad Mini yesterday and the divs are locked for some reason. The stories do load, but they won't scroll.
The basic setup for those divs is thus:
#display1 {
background-color: white;
height: 350px;
overflow: auto;
}
#display1Inner {
width: 100%;
height: 100%;
overflow: visible;
}
<div name="display1" id="display1" title="Display1">
<span id="display1JavaWarning">You may need to enable
Javascript</span>
<object type="text/html" id="display1Inner"></object>
</div>
When the page loads, it executes a javascript function that picks a random preview htm file, and then populates the display1Inner object with that data. I'm aware that my coding could often be tighter, but it does generally work. Except on mobile Safari apparently.
I've tried a bunch of CSS variations after researching similar problems, but nothing seems to do the trick. That "overflow: visible;" bit was one of my latest attempts, but it wasn't present when I first noticed the problem. I don't know anybody with an iPhone (oddly enough) so I'm not sure if later versions of Safari still bug out on this, but the iPad I tested this on isn't that old. I should be able to make this work. Any thoughts?
PS. The page is still is a work in progress, sorry if you have a hard time navigating it.
ETA: Alright so I converted the page to use iframes inside nested divs, and now it works across platforms. So that much is solved. Yay!
Now though, I'm fiddling around trying to get rid of the double-scrollbars that appear when the page is viewed in desktop browsers. As I understand this workaround, IOS Safari totally disregards iframe height settings and displays them at full length. Hence the need for the iframe-wrapper div to keep that in check. And hence the extra scrollbar when I look at it in a "normal" browser window. If I disable scrolling on the iframe-wrapper div then it eliminates the double scrollbar, but also breaks scrolling in Safari.
You can view the most current incarnation at http://strange.business/test.htm. I'm open to suggestions.
ETA: Success! After setting the iframe heights to 99% and taking out the borders, they look just about like they did before, with no extra scrollbars. And scrolling works across platorms now. One less problem in the my life. Thanks for the help!
Have you tried the following CSS for your div:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I came across that solution in this codepen:
https://codepen.io/kristiegiles/pen/WveNaX?editors=110
It is set up to scroll an iframe, but I tried it with some plain html in place of the iframe and it worked on my iPhone.
The html is basically a div wrapped around your content:
<h1>scrolling on iOS</h1>
<div class="content">
<div class="iframe-wrapper">
// Your content here
</div>
</div>
With -webkit-overflow-scrolling: touch; and overflow-y: scroll; added to the class applied to the div:
html,body{
height:100%;
}
.content{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.iframe-wrapper{
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
Hope that helps.

css ios webkit object-fit failing to correctly honor object-position

EDIT: had originally said the wrong iOS version (it's basically the latest, 9.3.5)
EDIT: thanks to the kind soul who edited the question to include the snippet.
not sure why my chrome browser is not allowing editing of snippets in the question editor anymore.
First up:
I tried to make a stack snippet for this question, but unfortunately the snippets editor is not allowing me to edit any code in chrome on a chromebook. I'm not entirely sure why stack overflow don't just write a simple importer that converts a jsfiddle link into the stack snippet format. If the editor does not work, I am forced to resorting to much maligned cut and paste code and link question format.
Anyway the link for my fiddle is https://jsfiddle.net/vwm2opf7/1/
A "full screen" link for that fiddle is
https://jsfiddle.net/vwm2opf7/1/embedded/result/
(because my issue is a mobile web issue it's best just loading that second link to observe the problem).
The code portions are here
html {
font-size: 16px;
font-family: Arial;
}
body {
overflow: hidden;
}
#div_page_header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
color: #FFFFFF;
background-color: #102339;
}
#div_image_banner {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#img_banner_pic {
width: 100%;
height: 100%;
object-position: top left;
object-fit: contain;
}
<body>
<div id="div_page_header">
<div id="div_image_banner">
<img alt="logo" src="http://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" id="img_banner_pic">
</div>
</div>
</body>
What I'm expecting it to see the logo graphic auto scaled,and inset 10px from the top left hand corner, and scaled to fit vertically to 10px from the bottom of the blue box, with the aspect ratio retained. basically exactly like this:
now in chrome on the desktop, it behaves correctly
on android chrome, it behaves correctly also.
using any browser (eg safari, chrome, opera, even the lastpass browser) on an iphone 4S running iOS 9.3.5, you get the logo image centered in the blue panel.
I'm assuming it a webkit issue.
I'm after a css-only solution to correctly position the logo, with scaling.
The reason for the 2 div approach, is i have found (in desktop at least) the only way to get the object-position to work correctly with an inset is to do this which then allows 100% to be used for width and height. even a calc (100%-20px) does not work properly. the reason for the inset is i'm using media queries to fine tune positioning for different sized screens. (not in this example, but i prefer to reduce example code to the bare minimum to show the problem, as in doing this it reduces complexity, and often I find the solution before finishing the question)
Yes, Safari 7.1-9.1 support object-fit but not object-position (see object-fit on caniuse)
No way around it other than using a polyfill like object-fit-images that will also fix object-fit in IE9+

IE7 Display Bug, Magic Padding/Margin that should not exist

Preface: Sorry if this question should have been posted on a sister-site. There's so many now it's hard to tell what still falls under SO's jurisdiction.
Problem: I'm having a problem with consecutive <div> elements. Sometimes there's a magic padding/margin between them and I cannot figure out why.
IE7 Magic Padding Bug http://img689.imageshack.us/img689/6239/ie7bug.png
As you can see there's a space between my container's header div and the body div. Let me explain how my DOM/CSS is set up:
HTML
<div class="Product-IconView">
<div class="PIV_TopCap"></div>
<div class="PIV_Body">
...
</div>
</div>
A simple container/child div setup, nothing fancy.
CSS
Top Cap:
.PIV_TopCap
{
margin: 0px;
padding: 0px;
height: 10px;
line-height: 1px; /* For IE so the text doesn't make the div higher */
overflow: hidden;
background-repeat: no-repeat;
background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}
Body:
.PIV_Body
{
height: 266px;
padding-left: 10px;
padding-right: 10px;
background-repeat: repeat-y;
background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}
As you can see, pretty simple CSS too, nothing overly fancy. Inside the body is another series of <div> items following the same principle as this div (container div, stacked children). That do not exhibit strange padding like this.
I've used the developer tooling in IE9 (with IE7 standards enabled) to inspect the DOM and see what might be causing this (like a margin pushing up through the top or something)
As you can see here:
Body Highlighted http://img844.imageshack.us/img844/3448/ie7bug01.png
Top Highlighted http://img192.imageshack.us/img192/46/ie7bug02.png
The bounds of the divs are intact and correct.
Conclusion This is a very strange bug, I saw it in an earlier design of mine and wasn't able to figure it out there either. It's really the only IE7 migration issue I've encountered with this project so far. To the best of my knowledge I'm following HTML Standards really close (I know IE tends not to respect them in some cases, but the plan is to do this as right as I can).
Questions for you:
What should I look for that might cause this?
Am I doing something wrong? If so, how can I fix it?
Is there a simpler / better way of going about this?
Is there something obvious I am missing?
Also
If you need clarifications or more information please feel free to leave them in the comments, I will answer them when I see them. (Posting this kinda late on a friday :o).
Found the answer so I will post it here for anyone that lands here looking for help with IE7.
The problem was the font-size of the top div. While I had line-height: 1px; set, the rendering engine still allocated 14px for the 12px font, this invisible allocation/padding/margin/whatever bleeds out through the div even with overflow: hidden or strict size constraints.
Simply making sure both these lines were in my top div (smaller than a line of text):
font-size: 1px;
line-height: 1px;
...will fix the issue.
It seems IE7 does not obey line-height very well.