title: DOMpdf with laravel is changing the HTML layout white it is working fine with browser tab
body: <p>I am using dom PDF to convert HTML to PDF file. My HTML has heavy css like postition and flex. somehow I manage to remove flex. My problem is when I export my html to pdf in pdf layout of html get change but it is showing perfactly fine if I open that html in my browser I am adding an image referance to show,</p>
  <p><a href="https://i.stack.imgur.com/tuYI9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tuYI9.png" alt="enter image description here" /></a></p>
  <p>Here is my HTML code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;style&gt;
          .gridItem {
              padding: 10px;
              cursor: move;
              transition: transform .09s ease-in;
              text-align: center;
          }
          .gridItem-circle {
              position: relative;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              box-sizing: border-box;
              border: 1px solid #444;
              border-radius: 50%;
              background: #fff;
              height: 60%;
              width: 60%;
          }
          .gridItem-seat {
              border: 1px solid #444;
              background-color: #f5f5f5;
              border-radius: 50%;
              text-align: center;
              position: relative;
              height: 33px;
              width: 33px;
          }
  
          .gridItem-circleLabel {
              font-size: 14px;
              line-height: 21px;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              color: #8c8c8c;
              font-weight: 400;
              padding: 0 10px;
              box-sizing: border-box;
              text-align: center;
              width: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="gridItem ui-draggable ui-draggable-handle" id="circle22" style="top: 239px; left: 514px; width: 208px; height: 208px; visibility: visible; position: relative; z-index: 999999;"&gt;
              &lt;div class="gridItem-table gridItem-circle" style="z-index: -1"&gt;
                  &lt;div class="gridItem-circleLabel"&gt;
                      Makwana Family
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(0deg) translate(64px) rotate(-0deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(45deg) translate(64px) rotate(-45deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(90deg) translate(64px) rotate(-90deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(135deg) translate(64px) rotate(-135deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(180deg) translate(64px) rotate(-180deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(225deg) translate(64px) rotate(-225deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(270deg) translate(64px) rotate(-270deg);"&gt;&lt;/div&gt;
              &lt;div class="gridItem-seat ui-droppable" style="position: absolute; top: calc(50% - 17.5px); left: calc(50% - 17.5px); z-index: -1; transform: rotate(315deg) translate(64px) rotate(-315deg);"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>