Text gets blurry when using transform(-50%,-50%) to center the section

Question

I use this code to center a section : (This is the only way I can do to center this section )

<div class="clock-section">
          <h5 id="clock-title">We are coming really soon</h5>
                <hr class="hr" id="cdhr">
              </div>

CSS :

.clock-section {
    position:absolute;
    top:50%;
    left:50%;
     transform:translate(-50%, -50%);
}

The section is centered well , but the problem is that the text gets blurry and also the hr looks ugly and blurry,
I have tried all methods like webfont smooth etc, but didn't work at all ! :(
Can anyone help me ?
Thanks ...

I tested it on Chrome and Firefox, the text does not gets blurry for me... — Ahs N, Aug 28 '15 at 18:13
related: http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d — cocoa, Aug 28 '15 at 18:31
@AhsN In the case i am using it , its very blurry and ugly , the browser doesn't matters , its blurry in Chrome , Opera and Firefox ... — I1m3a7n92, Aug 28 '15 at 19:40
@cocoa thanks for the link but it didn't help me at all ! i tasted it but nothing changed ! and as I told i have to use transform ... :) — I1m3a7n92, Aug 28 '15 at 19:41
can you post image or fiddle? As @Ahs N said, can't find any issue with text or hr. — CodeRomeos, Aug 28 '15 at 19:53
@CodeRomeos unfortunately the project is very complicated that is impossible to create fiddle of it ... but about picture , here is the problem when I use transform , the text and hr gets blurry : http://themeliberty.ir/problem1.png ,And when I remove the transform , everything is ok and the text is nice : http://themeliberty.ir/problem2.png — I1m3a7n92, Aug 28 '15 at 20:54
ah, there's a background image. that would have been good to know — cocoa, Aug 28 '15 at 20:57

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

From a different question, the answer was

h5 {
  background: transparent;
}

Not sure if that is the answer in your case.

EDIT: Or how about this?

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

edited May 23 '17 at 12:23

Community

1
1

answered Aug 28 '15 at 21:07

cocoa

3,806
7
29
56

darn. wish i could see the blurriness on my side – cocoa Aug 28 '15 at 21:17
how about using pixel values instead of percentages for the transform? – cocoa Aug 28 '15 at 21:19
I am using transform(-50%) to center the section which has unknown height and width , How can I use pixel value to center the section ? is there a way ? – I1m3a7n92 Aug 28 '15 at 21:22
i don't know how to do it unless the parent has a defined height and width. – cocoa Aug 28 '15 at 21:41
you know , I cant share the project in public , can you give me an email address or something so that I can send you the files ? Thanks a lot man :) – I1m3a7n92 Aug 28 '15 at 21:46
sure, i don't know if i'll be able to help much more though. i've just been googling. my email is in my profile – cocoa Aug 28 '15 at 21:53
Thanks anyway , i appreciate your effort :) – I1m3a7n92 Aug 28 '15 at 21:55

u238 · Answer 2 · 2016-05-01T13:59:21.477

1

I have tried all of solutions, sometimes they worked sometimes didn't. Finally I gave up to use this method to center elements. Instead of using transform try this :

width: 50vw;
height:50vh;
position: fixed;/*or absolute*/
margin:25vh 25vw;

This code centers the main element on screen. You can use flex or another solution to center inside elements...

edited May 01 '16 at 13:59

answered May 01 '16 at 13:53

u238

373
4
14

Text gets blurry when using transform(-50%,-50%) to center the section

2 Answers2