Fill pattern problem with PDF generated from SVG using Batik when viewed in a browser

Question

I am using Batik to convert SVG documents to PDF. The SVG uses vector fill patterns, defined within the SVG itself as <pattern..> elements, to fill some shapes/paths etc.

When I view the resulting PDF using Acrobat it looks perfect, but when I view the same in a web browser such as Chrome the pattern fills are only partially rendered, and jump around as I scroll the PDF document.

As a sanity check I loaded the same SVG to Inkscape and exported as PDF, and the problem does not manifest, so it feels like this is related to Batik.

Here is sample SVG that demonstrates the problem, and an image showing the aberrations seen when viewing the resulting PDF in a web browser like Chrome (also same problem seen in Edge).

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
  <defs>
<pattern id="dots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
  <circle cx="5" cy="5" r="2" fill="black" />
</pattern>

<pattern id="gravel" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" >
  
  <path
 style="fill:none;stroke:#000000"
 d="M 1,2 3,1 5,4 2,5 Z"
 id="path101" />
 
  <path
 style="fill:none;stroke:#000000"
 d="M 4,7 8,5 9,8 7,9 5,9 Z"
 id="path102" />     
 
 </pattern>


</defs>
  
  
<rect x="20" y="20" width="70" height="350" fill="url(#dots)" stroke="black" stroke-width="1" />
   
    <rect x="100" y="20" width="70" height="350" fill="url(#gravel)" stroke="black" stroke-width="1" />
  
  
</svg>

Missing patches of pattern fill applied to two rectangles in the PDF when viewed in Chrome